import QtQuick 2.7
import QtGraphicalEffects 1.0

Rectangle {
    id:root
    color: "#322d2d"

    border.width: 2
    border.color: "white"

    height: width
    radius: width/2

    signal clicked
    signal horvered

    property alias text: btnLable.text
    property alias mouseArea: mouseArea
    property bool clickSta:false

    property color normalColor:clickSta?"#4f5255":"#00ff7f"

    RadialGradient {
        anchors.fill: parent
        visible: false
        horizontalRadius: width
        verticalRadius:   width
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#66cdaa" }
            GradientStop { position: 1.0; color: "#008b8b" }
        }
    }

    MouseArea {
        id: mouseArea
        anchors.fill: parent

        onClicked: {
            emit:root.clicked()
        }
        onReleased: {
            if(mouse.containsMouse)
                container.state = "hovered"
            //root.state = "normal"
        }
        onPressed:{
            root.state = "pressed"
        }
        onEntered: {
            if(root.state !== "clicked"){
                root.state = "hovered"
                root.horvered()
            }
        }

        onExited: {
            if(root.state !== "clicked")
                root.state = "normal"
        }
    }

    Text {
        id: btnLable
        anchors.centerIn: parent
        font.bold: true
        font.pixelSize: 24
    }
    state: "normal"
    /* ! 描述了按钮的状态 ! */
    states: [
            State {
                name: "normal"
                PropertyChanges {
                    target: root
                    color:normalColor
                }
                PropertyChanges {
                    target: root
                    border.color:"white"
                }
                PropertyChanges {
                    target: btnLable
                    color:"white"
                }
            },
            State {
                name: "hovered"
                PropertyChanges {
                    target: root
                    color:"#66cdaa"
                }
                PropertyChanges {
                    target: root
                    border.color:"white"
                }
                PropertyChanges {
                    target: btnLable
                    color:"white"
                }
            },
            State {
                name: "pressed"
                PropertyChanges {
                    target: root
                    color:"white"
                }
                PropertyChanges {
                    target: root
                    border.color:"#00ff7f"
                }
                PropertyChanges {
                    target: btnLable
                    color:"#322d2d"
                }
            },
            State {
                name: "clicked"
                PropertyChanges {
                    target: root
                    scale:1.0
                }
            }
     ]


}
